/// 页面 * CRUD

<template>
  <Page>
    <!-- <HdSelect
      :options="[
        { label: '站点1', value: '1' },
        { label: '站点2', value: '2' },
        { label: '站点3', value: '3' },
      ]"
      :on-change="(value: SelectValue) => {
        console.log('on-change', value)
      }"
    /> -->
    <!-- 搜索栏 -->
    <ExSearchbar v-bind="searchbar.bind">
      <ExSearchbarItem label="站点名称" name="siteName">
        <ExSelect
          :options="[
            { label: '站点1', value: '1' },
            { label: '站点2', value: '2' },
            { label: '站点3', value: '3' },
          ]"
          :on-change="(value: SelectValue) => {
            console.log('on-change', value)
          }"
        />
      </ExSearchbarItem>
    </ExSearchbar>
    <!-- 表格 -->
    <ExGrid v-bind="grid.bind" />
    <!-- <HdGrid
      v-bind="grid.bind"
      @page-change="() => {
        console.log('page-change')
      }"
      @proxy-query="() => {
        console.log('proxy-query')
      }"
    /> -->
    <!-- 弹框-新增、编辑 -->
    <ExDialog v-bind="addDialog">
      <AddModal v-bind="addDialog" />
    </ExDialog>
    <!-- 弹框-详情 -->
    <ExDialog v-bind="detailDialog">
      <DetailModal v-bind="detailDialog" />
    </ExDialog>
  </Page>
</template>

<script setup lang="tsx">
import { ExDialog, ExGrid, ExSearchbar, ExSearchbarItem, Message, useGrid } from '@expresso/plus'
import type { SelectValue } from 'ant-design-vue/es/select'
import type { AddModalProps, DetailModalProps } from './components'
import { AddModal, DetailModal } from './components'
import type { Site, SiteParmas } from '@/apis/system/project/Site'
import { apiDeleteSite, apiQuerySitePage } from '@/apis/system/project/Site'
import { isSucceed } from '@/helpers'

//# 类型

type RowData = Site
type SearchModel = SiteParmas

//# 配置
defineOptions({ name: 'PageCrudDemo' })

//# 成员

/** 弹框-新增 */
const addDialog = useDialog<AddModalProps['params']>()
//|
/** 弹框-详情 */
const detailDialog = useDialog<DetailModalProps['params']>()

/** 加载器 */
const loading = useLoading()

/** 搜索栏 */
const searchbar = useSearchbar<SearchModel>({
  btns() {
    loading(grid.api.request(1))
  },
})

/** 表格 */
const grid = useGrid<RowData, SearchModel>({
  searchbar,
  data: [],
  columns: [
    columnSeq(),
    column('站点名称', 'siteName', 180),
    column('所属项目', 'projectName', 240),
    column('所属系统', 'systemName', [180], {
      renderer(params) {
        return <div>{params.cellView}</div>
      },
    }),
    column('所属分组', 'groupName', [100]),
    column('操作人员', 'updateBy', [120]),
    column('修改时间', 'updateTime', [160]),
    columnAction(
      {
        detail: [
          (params) => {
            console.log('detail', params, params.cellValue)
            openDialog(detailDialog, {
              title: '站点详情',
              params: {
                id: params.cellValue,
              },
            })
          },
          {
            danger: true,
            hide(params) {
              return params.cellValue === '1714358327302'
            },
          },
        ],
        edit(params) {
          console.log('edit', params)
          openDialog(addDialog, {
            title: '编辑站点',
            params: {
              action: 'edit',
              id: params.cellValue,
            },
            onOk() {
              addDialog.onCancel()
              loading(grid.api.request)
            },
          })
        },
        remove: {
          onClick(params) {
            console.log('del', params)
            Message.confirm('remove', () => {
              loading(async () => {
                const res = await apiDeleteSite(params.cellValue)
                if (isSucceed(res)) {
                  await grid.api.request()
                }
              })
            })
          },
        },
        more: {
          field: 'siteName',
          // render(params) {
          //   console.log('more', params)
          //   return <span>更多</span>
          // },
          render: [
            'dropdownBtns',
            {
              title: '更多',
              field: 'siteName',
              items: [
                {
                  key: 'enable',
                  title: '启用',
                  onClick(params) {
                    console.log('启用', params)
                  },
                },
                {
                  key: 'disable',
                  title: '禁用',
                  onClick(params) {
                    console.log('禁用', params)
                  },
                },
              ],
            },
          ],
        },
      },
      ['siteId', 260],
    ),
  ],
  async queryPage(params) {
    console.log('queryPage', params)
    // const i = 0
    // if (!i) {
    //   return { total: 1, list: [{ siteId: 1, siteName: '站点1' }] as any }
    // }
    const { total, list } = await apiQuerySitePage(params)
    return { total, list }
  },

  tools: {
    add() {
      // console.log('add')
      // searchbar.setData({ roleName: 'Darwin' })
      openDialog(addDialog, {
        title: '新增站点',
        params: {
          action: 'add',
        },
        onOk() {
          addDialog.onCancel()
          loading(grid.api.request)
        },
      })
    },
    // export() {
    //   //
    // },
  },
})

//# 周期

onMounted(() => {
  loading(async () => {
    // const res = await grid.api.request()
    const res = await grid.api.queryPage()
    console.log('res', res, grid.api)
  })
})
</script>

<style scoped></style>
